import '@static/js/draw-lib/Leaflet.draw.js'
import '@static/js/draw-lib/Leaflet.Draw.Event.js'
import '@static/js/draw-lib/Control.Draw.js'
import '@static/js/draw-lib/Toolbar.js'
import '@static/js/draw-lib/Tooltip.js'

import '@static/js/draw-lib/ext/GeometryUtil.js'
import '@static/js/draw-lib/ext/LatLngUtil.js'
import '@static/js/draw-lib/ext/LineUtil.Intersect.js'
import '@static/js/draw-lib/ext/Polygon.Intersect.js'
import '@static/js/draw-lib/ext/Polyline.Intersect.js'
import '@static/js/draw-lib/ext/TouchEvents.js'

import '@static/js/draw-lib/draw/DrawToolbar.js'
import '@static/js/draw-lib/draw/handler/Draw.Feature.js'
import '@static/js/draw-lib/draw/handler/Draw.SimpleShape.js'
import '@static/js/draw-lib/draw/handler/Draw.Polyline.js'
import '@static/js/draw-lib/draw/handler/Draw.Marker.js'
import '@static/js/draw-lib/draw/handler/Draw.Circle.js'
import '@static/js/draw-lib/draw/handler/Draw.CircleMarker.js'
import '@static/js/draw-lib/draw/handler/Draw.Rectangle.js'
import '@static/js/draw-lib/draw/handler/Draw.Polygon.js'

import '@static/js/draw-lib/edit/EditToolbar.js'
import '@static/js/draw-lib/edit/handler/EditToolbar.Edit.js'
import '@static/js/draw-lib/edit/handler/EditToolbar.Delete.js'

import '@static/js/draw-lib/edit/handler/Edit.Poly.js'
import '@static/js/draw-lib/edit/handler/Edit.SimpleShape.js'
import '@static/js/draw-lib/edit/handler/Edit.Rectangle.js'
import '@static/js/draw-lib/edit/handler/Edit.Marker.js'
import '@static/js/draw-lib/edit/handler/Edit.CircleMarker.js'
import '@static/js/draw-lib/edit/handler/Edit.Circle.js'
// import L from 'leaflet'

const POLYLINE_OPTIONS = {
  stroke: true,
  color: '#f00',
  weight: 2,
  opacity: 1.0,
  fill: false,
  clickable: true
};

const SHAPE_OPTIONS = {
  stroke: true,
  color: '#f00',
  weight: 2,
  opacity: 1,
  fill: true,
  fillColor: '#f00',
  fillOpacity: 0.2,
  clickable: true
}

const customMarkerIcon = L.icon({
    shadowUrl: null,
    iconAnchor: new L.Point(13, 41),
    iconSize: new L.Point(25, 41),
    popupAnchor: [-1, -30],
    iconUrl: '../../../../static/css/images/marker-icon.png'
});

class DrawHelper {

  _layer = null;

  setDrawLayer(layer) {
    this._layer = layer;
  }

  drawLayer (o) {
    if (o.type === 'marker') {
      return this.drawMarker(o.latlngs[0])
    } else if (o.type === 'polyline') {
      return this.drawPolyline(o.latlngs)
    } else if (o.type === 'polygon') {
      // debugger
      return this.drawPolygon(o.latlngs)
    } else if (o.type === 'circle') {
      return this.drawCircle(o.latlngs[0], o.radius)
    } else if (o.type === 'rectangle') {
      return this.drawRectangle(o.latlngs)
    }
  }

  drawMarker(latlng) {
    // console.log('draw marker:::', latlng, this._layer);
    return L.marker(latlng, {icon: customMarkerIcon}).addTo(this._layer);
  }

  drawPolyline(latlngs) {
    let points = latlngs.map(pt => {
      return [
        pt.lat, pt.lng
      ];
    });
    return L.polyline(points, POLYLINE_OPTIONS).addTo(this._layer);
  }

  drawCircle(latlng, radiusInMeters) {
    let options = {...SHAPE_OPTIONS, radius: radiusInMeters};
    return L.circle([latlng.lat, latlng.lng], options).addTo(this._layer);
  }

  drawRectangle(latlngs) {
    let bounds = [[latlngs[0].lat, latlngs[0].lng], [latlngs[2].lat, latlngs[2].lng]];
    return L.rectangle(bounds, SHAPE_OPTIONS).addTo(this._layer);
  }

  drawPolygon(latlngs) {
    let points = latlngs.map(pt => {
      return [
        pt.lat, pt.lng
      ];
    })
    // debugger
    return L.polygon(points, SHAPE_OPTIONS).addTo(this._layer);
  }
}
export default new DrawHelper()
